<template>
  <div class="options-editor">
    <div class="section-header">
      <h4>选项管理</h4>
    </div>
    
    <div class="options-list">
      <div v-for="(option, index) in options" :key="index" class="option-item">
        <div class="option-inputs">
          <el-input 
            v-model="option.label" 
            placeholder="显示文本" 
            size="small" 
            @change="updateOptions"
          >
            <template #prepend>文本</template>
          </el-input>
          
          <el-input 
            v-model="option.value" 
            placeholder="值" 
            size="small" 
            @change="updateOptions"
          >
            <template #prepend>值</template>
          </el-input>
        </div>
        
        <el-button 
          type="danger" 
          :icon="Delete" 
          circle 
          size="small" 
          @click="removeOption(index)"
        />
      </div>
      
      <div v-if="options.length === 0" class="no-options">
        <p>当前没有选项。点击添加按钮创建选项。</p>
      </div>
    </div>
    
    <div class="options-actions">
      <el-button 
        type="primary" 
        size="small" 
        @click="addOption"
      >
        添加选项
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { useDesignStore } from '@/stores/designStore';
import { Delete } from '@element-plus/icons-vue';

const props = defineProps<{
  componentId: string;
}>();

const designStore = useDesignStore();

// 选项数据结构
interface SelectOption {
  label: string;
  value: string;
}

const options = ref<SelectOption[]>([]);

// 初始化选项数据
onMounted(() => {
  loadOptions();
});

// 当组件ID变化时重新加载选项
watch(() => props.componentId, () => {
  loadOptions();
});

// 从store中加载选项
const loadOptions = () => {
  const component = designStore.findComponentById(designStore.canvasComponents, props.componentId);
  if (!component) return;

  const existingOptions = component.props?.options || [];
  
  // 转换现有选项为统一格式
  options.value = existingOptions.map((option: any) => {
    // 如果选项是字符串形式，则创建 {label, value} 对象
    if (typeof option === 'string') {
      return { label: option, value: option };
    }
    // 如果已经是对象，则确保有label和value属性
    return {
      label: option.label || '',
      value: option.value !== undefined ? option.value : option.label || ''
    };
  });
  
  // 确保至少有一个选项
  if (options.value.length === 0) {
    options.value = [{ label: '选项1', value: 'option1' }];
    updateOptions();
  }
};

// 添加新选项
const addOption = () => {
  const newIndex = options.value.length + 1;
  options.value.push({
    label: `选项${newIndex}`,
    value: `option${newIndex}`
  });
  updateOptions();
};

// 移除选项
const removeOption = (index: number) => {
  options.value.splice(index, 1);
  updateOptions();
};

// 更新store中的选项
const updateOptions = () => {
  designStore.updateComponentProps(props.componentId, {
    options: options.value
  });
};
</script>

<style scoped>
.options-editor {
  margin-top: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-header h4 {
  margin: 0;
  font-size: 14px;
  color: #303133;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.options-list {
  margin-bottom: 15px;
}

.option-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.option-inputs {
  display: flex;
  flex: 1;
  gap: 10px;
  margin-right: 10px;
}

.option-inputs .el-input {
  flex: 1;
}

.options-actions {
  display: flex;
  justify-content: flex-start;
}

.no-options {
  padding: 10px;
  color: #909399;
  font-size: 14px;
  text-align: center;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  margin-bottom: 10px;
}
</style> 